import React, { useEffect, useState } from 'react';
import { Table, Tag, Card, message } from 'antd';

import { getGoodsByPage, deleteGoods } from '../../apis/goods'

import './goods.css'

export default () => {
  const [list, setList] = useState([])

  const deleteGood = (gid) => {
    console.log("当前点击的商品id", gid);
    deleteGoods(gid)
      .then(data => {
        message.success('商品删除成功')
      })
      .catch(err => message.error('商品删除失败'))
  }

  const columns = [
    {
      title: '名称',
      dataIndex: 't',
      key: 't',
      render: text => <a className='goodName'>{text}</a>,
      width: 500,
      ellipsis: true,
      align: 'center',
    },
    {
      title: '价格',
      dataIndex: 'jp',
      key: 'jp',
      render: jp => <text className='price'>{jp}</text>,
      width: 200,
      align: 'center',
    },
    {
      title: '图片',
      dataIndex: 'img',
      key: 'img',
      render: imgPath => <img className='good_img' src={'https://img10.360buyimg.com/jdcms/s150x150_' + imgPath} />,
      width: 200,
      align: 'center',
    },
    {
      title: '操作',
      key: 'tags',
      dataIndex: 'tags',
      align: 'center',
      render: (text, record, index) => (
        // return (
        <>
          <Tag className='tag' color='green'>编辑</Tag>
          <Tag className='tag' color='purple'>下架</Tag>
          <Tag className='tag' color='red' onClick={() => { deleteGood(record._id) }}>删除</Tag>
        </>
        // );
      )
    }
  ];

  useEffect(
    async () => {
      let { data } = await getGoodsByPage()
      setList(() => data.map(item => ({ ...item, key: item.t })))
    },
    []
  )

  return (
    <Card title='商品管理'>
      <Table columns={columns} dataSource={list} pagination={{ pageSize: 5 }} />
    </Card>
  )
}